<template>
  <div>
    <button @click="goBack">返回首页</button>
    <div class="other-title">
      <div class="other-text" v-for="v in info" :key="v.product_id">
        <img :src="v.product_img_url" alt="" />
        <p>{{ v.product_name }}</p>
        <p>{{ v.product_detail }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getDetail } from "@/http/api";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const $route = useRoute();
const $router = useRouter();
const info = ref([]);
const goBack = () => {
  $router.push("/home");
};
onMounted(async () => {
  const _id = $route.params.id;
  const resp = await getDetail({ mId: _id });
  info.value = resp[1];
});
</script>

<style scoped></style>
